import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import { message } from 'antd';
import './Comment.scss'
import commentAction from '../../../redux/action/commentAction'
import CommentList from './CommentList/CommentList'
import request from '../../../api/api';
import UserComment from './CommentList/UserComment';
class Comment extends PureComponent {
  inpRef = React.createRef()
  state = {
    userComment:[]
  }
  componentDidMount(){
    this.getUserComment()
  }
  
  getUserComment = () => {
    let { username,movieId } = this.props
    request({
      url:`/cpi/userPublish/list?username=${username}&movieId=${movieId}`,
      method:'get'
    }).then(res=>{
      // console.log(res);
      this.setState({
        userComment: res.data[0].commentList
      })
    })
  }
  send = () => {
    let { intrObj,username,movieId } = this.props
    if (this.props.username === '') {
      message.error('要先登录');
      this.props.history.replace('/app/login')
      return
    }else{
      request({
        url:'/cpi/userPublish/publish',
        method:'post',
        params:{
          username,
          movieId,
          commentObj:this.inpRef.current.value
        }
      }).then(res=>{
        if(res.code===200){
          message.success('发布成功')
          this.getUserComment()
        }
      })
      this.props.commentAction('comment',intrObj)
      this.inpRef.current.value=''
    }
  }
  render() {
    let { commentList, zan } = this.props
    let { userComment } = this.state
    return (
      <>
        <div id="com">
          <ul>
            <CommentList commentList={commentList} />
            <UserComment userComment={userComment}/>
          </ul>
          <div style={{ 'height': '40px' }}></div>
          <div className="inp">
            <input type="text" placeholder="写评论..." ref={this.inpRef} />
            <button onClick={this.send}>发布</button>
            <span className="z-tal">
              <svg
                t="1640259337618"
                className="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4353"
                width="20"
                height="20"
              >
                <path
                  d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667zM544.256 149.333333c39.253333 0 59.498667 36.48 49.888 84.928-7.573333 38.144-21.984 104.426667-43.221333 198.666667-4.512 20.021333 10.56 39.093333 30.912 39.093333h218.666666c6.101333 0 12.16 1.066667 17.909334 3.168 27.445333 9.984 41.674667 40.554667 31.776 68.266667l-85.568 239.573333C744.981333 838.026667 693.301333 874.666667 635.402667 874.666667H223.498667C194.314667 874.666667 170.666667 850.784 170.666667 821.333333V503.498667c0-17.866667 14.144-32.448 31.829333-32.821334l21.866667-0.469333a221.12 221.12 0 0 0 167.381333-82.56c34.346667-42.602667 59.146667-99.306667 74.869333-169.877333C482.101333 166.336 499.552 149.333333 544.266667 149.333333z"
                  p-id="4354"
                  fill="#707070"
                ></path>
              </svg>
              {zan}
            </span>
            <span className="fen">
              <svg
                t="1640261592397"
                className="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="6474"
                width="20"
                height="20"
              >
                <path
                  d="M853.333333 533.333333a32 32 0 0 1 64 0v266.666667c0 64.8-52.533333 117.333333-117.333333 117.333333H224c-64.8 0-117.333333-52.533333-117.333333-117.333333V256c0-64.8 52.533333-117.333333 117.333333-117.333333h277.333333a32 32 0 0 1 0 64H224a53.333333 53.333333 0 0 0-53.333333 53.333333v544a53.333333 53.333333 0 0 0 53.333333 53.333333h576a53.333333 53.333333 0 0 0 53.333333-53.333333V533.333333z m-42.058666-277.333333l-89.792-95.402667a32 32 0 0 1 46.613333-43.861333l140.544 149.333333C927.861333 286.485333 913.376 320 885.333333 320H724.704C643.029333 320 576 391.210667 576 480v192a32 32 0 1 1-64 0V480c0-123.296 94.784-224 212.704-224h86.570667z"
                  p-id="6475"
                  fill="#707070"
                ></path>
              </svg>
            </span>
          </div>
        </div>
      </>
    )
  }
}
export default connect(state => ({
  username: state.login,
  comment: state.comment
}), {
  commentAction
})(withRouter(Comment))